/*

1. CSS RESET
2. Wrapper
3. Header
	3.1. Header menu
4. Content
	4.1. Lobby navigation
	4.2. Lobby sections table
	4.3. Lobby section hidden
	4.4. Lobby section list
	4.5. Gamedetails definitionlist
		4.5.1 Gamedetails definition description ( list element )
5. Messages

*/


/* 1. CSS RESET */
* { padding: 0; margin: 0; line-height: 1; }

body { background: #fff url('../img/website/bg.png'); font: 16px/1.5 georgia, verdana, arial, helvetica, sans-serif; color: #222; }

fieldset { border: 2px; background: #eee; padding: 10px; }
label { display: block; margin: 10px 0 4px 0; }
input { padding: 4px; }

/* 2. Wrapper */
#page-wrapper { width: 1000px; margin: 10px auto; }

/* 3. Header */
#header { overflow: auto; border-bottom: 1px solid #999; position: relative; }
	#header h1 { float: left; font: 30px/50px georgia, sans-serif; text-indent: 30px; color: #444;  }
		#header h1 a { color: #444; text-decoration: none; }
	
	/* 3.1. Header menu */
	#header ul { list-style-type: none; margin-right: 30px; }
		#header ul li { float: right; vertical-align: bottom; padding-left: 10px; font-size: 16px; color: #222; }
			#header ul li a { color: #444; text-decoration: none; display: block; padding: 16px; margin-bottom: 4px;}
			#header ul li a:hover { background: #eee; }
			#header ul li.active a { text-decoration: underline; }

/* 4. Content wrapper */
#content-wrapper { margin: 30px 30px; overflow: hidden; }
	#content-wrapper h2 { font: 20px/20px georgia, sans-serif; color: #444; margin-bottom: 20px; text-indent: 5px; border-left: 6px solid #eee; border-bottom: 3px solid #eee; }

	/* 4.1. Lobby navigation */
	#content-wrapper ul#lobby-nav { list-style-type: none; overflow: auto; }
		#content-wrapper ul#lobby-nav li { float: left; background: #ddd; }
		#content-wrapper ul#lobby-nav li#game-details { float: right; background: #ddd; }
		#content-wrapper ul#lobby-nav li.active { background: #eee; }
		#content-wrapper ul#lobby-nav li#game-details.active { background: #eee; }
			#content-wrapper ul#lobby-nav li a { display: block; line-height: 30px; font-variant: small-caps; font-size: 16px; text-decoration: none; color: #444; padding: 0 10px; }
			#content-wrapper ul#lobby-nav li a:hover { background: #ccc; }
			#content-wrapper ul#lobby-nav li.active a:hover { background: none; }
	
	/* 4.2. Lobby Sections table */
	#content-wrapper div.lobby-section { padding: 15px; background: #eee; }
		#content-wrapper div.lobby-section table { width: 100%; }
			#content-wrapper div.lobby-section table tbody tr.open { background: green; }
			#content-wrapper div.lobby-section table tbody tr.started { background: yellow; }
			#content-wrapper div.lobby-section table tbody tr.finished { background: red; }
			#content-wrapper div.lobby-section table th { width: 20%; line-height: 20px; font-variant: small-caps; border-bottom: 4px solid #444; }
			#content-wrapper div.lobby-section table td { line-height: 25px; padding-left: 10px; padding-right: 10px; }
			#content-wrapper div.lobby-section a.button { font-size: 12px; font-weight: bold; text-decoration: none; background: #ddd; padding: 0 4px; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; color: #666; font-family: verdana, sans-serif; }
			#content-wrapper div.lobby-section a.button:hover { color: #888; background: #e5e5e5;}
			
			/* 4.3. Lobby sections hidden */
			#content-wrapper div.lobby-section.hidden { display: none; }
	
			/* 4.4. Lobby section list */
			#content-wrapper div.lobby-section ul { list-style: none; }
				#content-wrapper div.lobby-section ul li { line-height: 1.5; }

			/* 4.5. Gamedetails definition list */	
			#game-details-section dl {}
			#game-details-section dt { font-weight: bold; }
			#game-details-section dd { padding: 4px 4px 10px 10px; }
				
				/* 4.5.1 Gamedetails definition description ( list element ) */
				#game-details-section dd ul li { padding: 5px 0; }
					#game-details-section ul li a { font-size: 10px; text-decoration: none; background: #ddd; padding: 2px 4px; border-top: 1px solid #fff; border-left: 1px solid #fff; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; color: #333; font-family: verdana, sans-serif; }
					#game-details-section ul li a:hover { color: #888; background: #e5e5e5;}

/* 5. Messages */
#content-wrapper p.error, #content-wrapper p.message { background: #eee; margin: 4px 0; padding: 4px 10px; }
	#content-wrapper p.error span { color: red; padding-right: 10px; }
	#content-wrapper p.message span { color: green; padding-right: 10px; }
